<template>
    <div v-loading="loading"
        class="w-100p h-100p"
        element-loading-text="PDF加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <iframe :src="src" width="100%" height="100%"></iframe>
    </div>
</template>
<script>
    export default {
        name: 'ui-pdf',
        props: {
            url: String,
            uri: String
        },
        data() {
            return {
                src: '',
                loading: true
            }
        },
        watch: {
            url(val) {
                if (this.uri) return
                if (val) {
                    let reg = /([^\s]+(?=\.(pdf))\.\2)/gi
                    if (!reg.test(val)) {
                        val += '.pdf'
                    }
                    this.src = `static/libs/pdfJs/web/viewer.html?file=${ encodeURIComponent(val) }`
                    this.loading = false
                }
            },
            uri(val) {
                if (val) {
                    this.src = val
                    this.loading = false
                }
            }
        }
    }
</script>
